import React, { useState, useEffect } from 'react';
import { Card, List, Avatar, Spin, message} from 'antd';
import { ConferenceContainer} from "../Conference/style";
import axios from 'axios';
import InfiniteScroll from 'react-infinite-scroller';
import './style.css';
const fakeDataUrl = 'https://randomuser.me/api/?results=5&inc=name,gender,email,nat&noinfo';

const ExerciseList = () => {
    const [loading, setLoading] = useState<boolean>(false);
    const [hasMore, setHasMore] = useState<boolean>(true);
    const [data, setData] = useState<any[]>([]);
    useEffect(() =>{
        axios.get(fakeDataUrl).then(res => {
            setData(res.data.results);
        })
    }, []);
    // 加载更多
    const handleInfiniteOnLoad = () => {
        setLoading(true);
        console.log(data.length);
        if(data.length >= 14){
            message.warning('亲，没有更多了~');
            setLoading(false);
            setHasMore(false);
            return;
        }
        axios.get(fakeDataUrl).then(res => {
            setData(data.concat(res.data.results));
            setLoading(false);
        });
    };

    return(
        <ConferenceContainer>
            <div className="content">
                <Card>
                    <div className="demo-infinite-container">
                        <InfiniteScroll
                            initialLoad={false}
                            pageStart={0}
                            loadMore={handleInfiniteOnLoad}
                            hasMore={!loading && hasMore}
                            useWindow={false}
                        >
                            <List
                                dataSource={data}
                                renderItem={item => (
                                    <List.Item key={item.id}>
                                        <List.Item.Meta
                                            avatar={
                                                <Avatar src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" />
                                            }
                                            title={<a href="https://ant.design">{item.name.last}</a>}
                                            description={item.email}
                                        />
                                        <div>Content</div>
                                    </List.Item>
                                )}
                            >
                                {loading && hasMore && (
                                    <div className="demo-loading-container">
                                        <Spin />
                                    </div>
                                )}
                            </List>
                        </InfiniteScroll>
                    </div>
                </Card>
            </div>
        </ConferenceContainer>
    )
};

export default React.memo(ExerciseList);